<template>
  <div id="root">
    <!--查询-->
    <div class="searchBox">
      <div style="font-size: 150%; font-weight: bold; margin-left: 170px">
        患者列表
      </div>
      <div style="margin-top: 15px">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="姓名" value="1"></el-option>
            <el-option label="编号" value="2"></el-option>
            <el-option label="电话" value="3"></el-option>
            <el-option label="年龄" value="4"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="datePicker">
        <el-date-picker v-model="date" type="date" placeholder="选择入院时间">
        </el-date-picker>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </div>
      <div></div>
      <!--查询结束-->
    </div>
    <el-main style="padding-top: 50px; position: center">
      <el-table
        :data="tableData"
        border
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column prop="No" label="编号" min-width="10%" sortable>
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="10%" sortable>
        </el-table-column>
        <el-table-column prop="sex" label="性别" min-width="10%" sortable>
        </el-table-column>
        <el-table-column prop="phoneNum" label="电话" min-width="30%">
        </el-table-column>
        <el-table-column prop="date" label="入院日期" min-width="30%" sortable>
        </el-table-column>
        <el-table-column prop="op" label="操作" min-width="10%">
          <template slot-scope="scope">
            <el-button @click="showImg(scope.row.name)" size="small"> 查看图像 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>

<style scoped>
.searchBox {
  margin: 50px 0px 50px 550px;
}
.datePicker {
  margin-top: 30px;
}
.el-select {
  width: 130px;
}
.input-with-select {
  width: 500px;
}
.el-table {
  width: 90%;
  max-height: 500px;
  margin: 0 auto;
}
</style>

<script>
export default {
  data() {
    return {
      input: "",
      select: "",
      date: "",
      tableData: [
        {
          No: "CS213",
          name: "王大拿",
          sex: "男",
          phoneNum: "13651704171",
          date: "2016-05-03",
        },
        {
          No: "NY291",
          name: "泰罗",
          sex: "男",
          phoneNum: "13801925586",
          date: "2016-07-23",
        },
      ],
    };
  },
  methods: {
    showImg(pname) {
      this.$router.push({
        name: 'image',
        params: {
          name: pname,
        },
      });
    },
  },
};
</script>